<template>
	<cl-popup
		v-model="visible"
		direction="bottom"
		:border-radius="[32, 32, 0, 0]"
		:padding="0"
		:close-on-click-modal="false"
		height="90vh"
	>
		<view class="payment-dialog">
			<!-- 头部标题 -->
			<view class="header">
				<text class="title">请选择支付方式</text>
				<view class="close-btn" @tap="cancel">
					<cl-icon name="cl-icon-close" :size="40" color="#999" />
				</view>
			</view>

			<!-- 支付金额 -->
			<view class="amount-section">
				<text class="amount-label">订单金额</text>
				<view class="amount-value">
					<text class="currency">¥</text>
					<text class="value">{{ formatPrice(amount) }}</text>
				</view>
				<text class="order-number">订单号：{{ orderNumber }}</text>
			</view>

			<!-- 支付方式选择 -->
			<view class="payment-methods">
				<view
					class="method-item"
					v-for="method in paymentMethods"
					:key="method.value"
					:class="{ active: activeMethod === method.value }"
					@tap="selectMethod(method.value)"
				>
					<view class="method-icon" :style="{ backgroundColor: method.bgColor }">
						<image :src="method.icon" mode="aspectFit" />
					</view>
					<view class="method-info">
						<text class="method-name">{{ method.name }}</text>
						<text class="method-desc">{{ method.desc }}</text>
					</view>
					<view class="method-check">
						<cl-icon
							:name="activeMethod === method.value ? 'cl-icon-radio-fill' : 'cl-icon-radio'"
							:size="40"
							:color="activeMethod === method.value ? method.color : '#ddd'"
						/>
					</view>
				</view>
			</view>

			<!-- 二维码展示区域 -->
			<view class="qrcode-section" v-if="showQRCode">
				<view class="qrcode-wrapper">
					<view class="qrcode-placeholder">
						<cl-icon :name="qrcodeIcon" :size="160" :color="qrcodeColor" />
						<text class="qrcode-text">二维码加载中...</text>
					</view>
				</view>
				<text class="scan-tip">{{ scanTip }}</text>
				<view class="countdown-wrapper">
					<cl-icon name="cl-icon-time" :size="32" color="#666" />
					<text class="countdown-text">
						<text class="countdown-value">{{ formatTime(countdown) }}</text> 后二维码过期
					</text>
				</view>
				<view class="refresh-btn" @tap="refreshQRCode">
					<cl-icon name="cl-icon-refresh" :size="36" color="#1890ff" />
					<text class="refresh-text">刷新二维码</text>
				</view>
			</view>

			<!-- 支付说明 -->
			<view class="payment-tips">
				<view class="tips-header">
					<cl-icon name="cl-icon-info" :size="32" color="#faad14" />
					<text class="tips-title">支付说明</text>
				</view>
				<view class="tips-list">
					<view class="tip-item">
						<text class="tip-number">1.</text>
						<text class="tip-text">请在 {{ formatTime(countdown) }} 内完成支付</text>
					</view>
					<view class="tip-item">
						<text class="tip-number">2.</text>
						<text class="tip-text">完成支付后，将自动跳转到订单页面</text>
					</view>
					<view class="tip-item">
						<text class="tip-number">3.</text>
						<text class="tip-text">如果遇到问题，请联系在线客服</text>
					</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<cl-footer :fixed="false" :height="180">
				<view class="footer-btns">
					<cl-button round fill @tap="cancel" color="#f5f5f5">
						<text style="color: #666">取消支付</text>
					</cl-button>
					<cl-button round fill type="primary" @tap="checkPaymentStatus">
						支付完成
					</cl-button>
				</view>
			</cl-footer>
		</view>
	</cl-popup>
</template>

<script lang="ts" setup>
import { ref, watch, onBeforeUnmount, computed } from "vue";
import { useCool } from "/@/cool";
import { useUi } from "/$/cool-ui";

const { router } = useCool();
const ui = useUi();

// Props
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	orderNumber: {
		type: String,
		default: "",
	},
	amount: {
		type: Number,
		default: 0,
	},
});

// Emits
const emit = defineEmits(["update:modelValue", "payment-success", "payment-cancel"]);

// 控制显示
const visible = computed({
	get() {
		return props.modelValue;
	},
	set(val) {
		emit("update:modelValue", val);
	},
});

// 支付方式列表
const paymentMethods = ref([
	{
		value: "wechat",
		name: "微信支付",
		desc: "推荐使用微信支付",
		icon: "/static/icon/wechat-pay.png",
		color: "#07C160",
		bgColor: "#f0faf5",
	},
	{
		value: "alipay",
		name: "支付宝支付",
		desc: "支付宝安全支付",
		icon: "/static/icon/alipay.png",
		color: "#1677FF",
		bgColor: "#f0f6ff",
	},
	{
		value: "unionpay",
		name: "银联支付",
		desc: "银行卡快捷支付",
		icon: "/static/icon/unionpay.png",
		color: "#E21C21",
		bgColor: "#fff0f0",
	},
]);

// 当前选中的支付方式
const activeMethod = ref("wechat");

// 是否显示二维码
const showQRCode = ref(false);

// 倒计时
const countdown = ref(300); // 5分钟
let countdownTimer: any = null;

// 二维码相关
const qrcodeIcon = computed(() => {
	const icons: any = {
		wechat: "cl-icon-wechat",
		alipay: "cl-icon-alipay",
		unionpay: "cl-icon-bank-card",
	};
	return icons[activeMethod.value] || "cl-icon-qr-code";
});

const qrcodeColor = computed(() => {
	const colors: any = {
		wechat: "#07C160",
		alipay: "#1677FF",
		unionpay: "#E21C21",
	};
	return colors[activeMethod.value] || "#666";
});

const scanTip = computed(() => {
	const tips: any = {
		wechat: "请使用微信扫一扫",
		alipay: "请使用支付宝扫一扫",
		unionpay: "请使用银行APP扫一扫",
	};
	return tips[activeMethod.value] || "请扫描二维码";
});

// 监听显示状态
watch(visible, (val) => {
	if (val) {
		startCountdown();
		// 模拟生成二维码
		setTimeout(() => {
			showQRCode.value = true;
		}, 500);
	} else {
		stopCountdown();
		showQRCode.value = false;
	}
});

// 选择支付方式
function selectMethod(method: string) {
	activeMethod.value = method;
	// 模拟重新生成二维码
	showQRCode.value = false;
	setTimeout(() => {
		showQRCode.value = true;
	}, 300);
}

// 格式化价格
function formatPrice(price: number): string {
	return price.toFixed(2);
}

// 格式化时间
function formatTime(seconds: number): string {
	const minutes = Math.floor(seconds / 60);
	const secs = seconds % 60;
	return `${minutes}分${secs.toString().padStart(2, "0")}秒`;
}

// 开始倒计时
function startCountdown() {
	countdown.value = 300;
	stopCountdown();
	
	countdownTimer = setInterval(() => {
		countdown.value--;
		if (countdown.value <= 0) {
			stopCountdown();
			ui.showToast("支付二维码已过期，请刷新后重试");
		}
	}, 1000);
}

// 停止倒计时
function stopCountdown() {
	if (countdownTimer) {
		clearInterval(countdownTimer);
		countdownTimer = null;
	}
}

// 刷新二维码
function refreshQRCode() {
	uni.vibrateShort();
	ui.showToast("二维码已刷新");
	startCountdown();
	// 模拟重新生成二维码
	showQRCode.value = false;
	setTimeout(() => {
		showQRCode.value = true;
	}, 300);
}

// 检查支付状态
async function checkPaymentStatus() {
	uni.vibrateShort();
	
	// 这里应该调用接口检查支付状态
	// 模拟支付成功
	ui.showToast("支付成功");
	visible.value = false;
	
	emit("payment-success", {
		orderNumber: props.orderNumber,
		paymentMethod: activeMethod.value,
		amount: props.amount,
	});
	
	// 跳转到订单详情
	setTimeout(() => {
		router.push(`/pages/order/detail?orderNo=${props.orderNumber}`);
	}, 1500);
}

// 取消支付
function cancel() {
	uni.showModal({
		title: "提示",
		content: "确定要取消支付吗？",
		success: (res) => {
			if (res.confirm) {
				visible.value = false;
				emit("payment-cancel", props.orderNumber);
				ui.showToast("已取消支付");
			}
		},
	});
}

// 组件卸载时清理
onBeforeUnmount(() => {
	stopCountdown();
});
</script>

<style lang="scss" scoped>
.payment-dialog {
	background-color: #f5f7fa;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #ebeef5;

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #303133;
	}

	.close-btn {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		transition: all 0.3s;

		&:active {
			background-color: #f5f7fa;
		}
	}
}

.amount-section {
	background-color: #fff;
	padding: 48rpx 32rpx;
	text-align: center;
	margin-bottom: 24rpx;

	.amount-label {
		font-size: 28rpx;
		color: #909399;
		display: block;
		margin-bottom: 16rpx;
	}

	.amount-value {
		display: flex;
		align-items: baseline;
		justify-content: center;
		margin-bottom: 16rpx;

		.currency {
			font-size: 36rpx;
			color: #ff4757;
			font-weight: 600;
			margin-right: 8rpx;
		}

		.value {
			font-size: 64rpx;
			color: #ff4757;
			font-weight: 700;
		}
	}

	.order-number {
		font-size: 24rpx;
		color: #c0c4cc;
	}
}

.payment-methods {
	background-color: #fff;
	padding: 0 32rpx;
	margin-bottom: 24rpx;

	.method-item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1rpx solid #ebeef5;
		transition: all 0.3s;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background-color: #f5f7fa;
			margin: 0 -32rpx;
			padding: 32rpx;
		}

		&.active {
			.method-name {
				color: #303133;
				font-weight: 600;
			}
		}

		.method-icon {
			width: 96rpx;
			height: 96rpx;
			border-radius: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 24rpx;

			image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.method-info {
			flex: 1;

			.method-name {
				font-size: 32rpx;
				color: #303133;
				display: block;
				margin-bottom: 8rpx;
				transition: all 0.3s;
			}

			.method-desc {
				font-size: 24rpx;
				color: #909399;
			}
		}

		.method-check {
			margin-left: 24rpx;
		}
	}
}

.qrcode-section {
	background-color: #fff;
	padding: 48rpx 32rpx;
	text-align: center;
	margin-bottom: 24rpx;

	.qrcode-wrapper {
		display: inline-block;
		padding: 24rpx;
		background-color: #f5f7fa;
		border-radius: 24rpx;
		margin-bottom: 32rpx;

		.qrcode-placeholder {
			width: 320rpx;
			height: 320rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			border-radius: 16rpx;

			.qrcode-text {
				font-size: 24rpx;
				color: #909399;
				margin-top: 16rpx;
			}
		}
	}

	.scan-tip {
		font-size: 28rpx;
		color: #606266;
		display: block;
		margin-bottom: 24rpx;
	}

	.countdown-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 32rpx;

		.countdown-text {
			font-size: 26rpx;
			color: #909399;
			margin-left: 8rpx;

			.countdown-value {
				color: #ff4757;
				font-weight: 600;
			}
		}
	}

	.refresh-btn {
		display: inline-flex;
		align-items: center;
		padding: 16rpx 32rpx;
		border-radius: 40rpx;
		background-color: #e6f2ff;
		transition: all 0.3s;

		&:active {
			transform: scale(0.95);
		}

		.refresh-text {
			font-size: 28rpx;
			color: #1890ff;
			margin-left: 8rpx;
		}
	}
}

.payment-tips {
	background-color: #fff;
	padding: 32rpx;
	margin-bottom: 24rpx;

	.tips-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		.tips-title {
			font-size: 30rpx;
			font-weight: 600;
			color: #303133;
			margin-left: 12rpx;
		}
	}

	.tips-list {
		.tip-item {
			display: flex;
			margin-bottom: 16rpx;

			&:last-child {
				margin-bottom: 0;
			}

			.tip-number {
				font-size: 26rpx;
				color: #909399;
				margin-right: 8rpx;
			}

			.tip-text {
				font-size: 26rpx;
				color: #606266;
				line-height: 1.5;
			}
		}
	}
}

.footer-btns {
	display: flex;
	gap: 24rpx;
	padding: 24rpx 32rpx;

	.cl-button {
		flex: 1;
		height: 96rpx;
	}
}
</style>